﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>狼途汽车门店管理平台-登录</title>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/js/adminlte/css/fonts.googleapis.com.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/adminlte/js/adminlte.min.js"></script>

    <link rel="stylesheet" href="/js/plugins/sweetalert2/sweetalert2.min.css">
    <script src="/js/plugins/sweetalert2/sweetalert2.min.js"></script>

<!--    加入jq的表单插件-->
    <script src="js/plugins/jquery-form/jquery.form.js"></script>

</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="http://www.wolfcode.cn"><b>狼途</b>汽车门店管理平台</a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">请输入账号密码</p>

        <form method="post" id="loginForm" action="/UserLogin">
            <div class="form-group has-feedback">
                <input type="text" name="username" class="form-control" placeholder="请输入账号"  value="admin">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control" placeholder="请输入密码"  value="1">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat submitBtn">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>


</body>
<script>
    $('.submitBtn').click(function () {
        //使用jq的参数提交序列化
        //当我们使用ajax提交的时候，这个时候form表单的提交是没有用的，这样表单数据获取不到
        //因此我们可以使用jq的表单插件，将表单升级为ajax类型
        // $.post("/loginUser",$('#loginForm').serialize(),function (data) {
        //       if (data.success){
        //           Swal.fire({
        //               title: '登录成功?',
        //               icon: 'success',
        //               confirmButtonColor: '#3085d6',
        //               confirmButtonText: 'OK',
        //
        //           })
        //           window.location.href="/employee/list"
        //       }else {
        //           Swal.fire({
        //               title: data.msg,
        //               icon: 'error',
        //               confirmButtonColor: '#3085d6',
        //               confirmButtonText: 'OK',
        //
        //           })
        //
        //       }
        // })

        $('#loginForm').ajaxSubmit(function (data) {
            if (data.success){
                Swal.fire({
                    title: '登录成功?',
                    icon: 'success',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',

                }).then((result) => {
                    if (result.value) {
                        window.location.href = "/employee/list"
                    }
                })

            }else {
                Swal.fire({
                    title: data.msg,
                    icon: 'error',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK',

                })

            }
        })


        //当我们即想要将按钮改为submit时，且想要通过ajax提交时，我们需要使用ajaxForm方法



    })
</script>
</html>
